<template>
    <div id="login">
		<div class="logo">
		    <img src="/public/logo.png" style="height: 60%;">
		</div>
        <div id="logindiv">
            <span id="title">帐号登录</span>
            <el-form ref="form" :model="obj.data" class="form">
                <el-form-item prop="uname" class="formitem" :rules="[formRulesMixin.notNull]">
                    <el-input v-model="obj.data.uname" :prefix-icon="Avatar" placeholder="请输入登录名" class="input" size="large" clearable />
                </el-form-item>
                <el-form-item prop="pass" class="formitem" :rules="[formRulesMixin.notNull]">
                    <el-input v-model="obj.data.pass" :prefix-icon="Lock" placeholder="请输入密码" class="input" size="large" show-password clearable />
                </el-form-item>
                <el-form-item prop="vcode" class="formitem" :rules="[formRulesMixin.notNull]">
                    <div class="vcodeinner">
                        <el-input v-model="obj.data.vcode" :prefix-icon="Discount" placeholder="请输入验证码" class="input" style="width:auto" size="large" clearable />
                        <img src="http://smartgarden.server.zh8848.top/zh8848/VerifyCode/h=40&bg=FFF3F5F8&len=4">
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="btn" :loading="false" @click.prevent="toLogin" native-type="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
    import { reactive, ref, getCurrentInstance } from "vue";
    import { Calendar, User, Avatar, Lock, Discount } from '@element-plus/icons-vue'
    let { proxy } = getCurrentInstance();
    let obj = reactive({
        data: {
            // uname: proxy.$route.query.account || localStorage.getItem("uname") || "",
            uname: "j1",
            pass: "1",
            vcode: "1"
        }
    });
    let toLogin = () => {
        sessionStorage.clear()
        proxy.$refs["form"].validate((valid) => {
            if (valid) {
                proxy.$ajax({
                    baseURL:proxy.$setting.globalUrl.base,
                    url: "root/login",
                    data: obj.data,
                    bfLoading: true,
                }).then(d => {
                    if (d.success) {
                        // window.location.href = "/main?" + date.msg.token;
                        sessionStorage.setItem("token", d.msg.token)
                        sessionStorage.setItem("userType", d.msg.type)
                        sessionStorage.setItem("name", d.msg.name)
                        sessionStorage.setItem("ID", d.msg.parent_id)
                        sessionStorage.setItem("userId", d.msg.userid)
                        proxy.routerPushMixin(`/${d.msg.type}/${d.msg.type==='mechanism'?"material":"work"}`)
                    } else {
                        proxy.elMessageMixin(d.err, "error");
                    }
                }).catch(() => {});
            } else {
                return false;
            }
        });
    };
</script>
<style scoped>
    #login {
        position: absolute; width: 100%; height: 100%; 
        background-image: url('/bg2.png'); background-size: cover; background-repeat: no-repeat; background-position: center; 
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    #login #logindiv {
        width: 384px; height: 392px; background: rgba(255, 255, 255,1); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06); border-radius: 12px; backdrop-filter: blur(16px);
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    .form { width: 300px; }
    #title { width: 404px; text-align: center; font-size: 24px; margin-bottom: 23px; color: #1D2129; }
    .input { width: 300px; }
    .vcodeinner { display: flex; flex-direction: row; height:40px; }
    .btn { background-color: #3575ff; border: 0; font-size: 16px; width: 300px; height: 42px; color: #FFF; display: flex; justify-content: center; align-items: center; margin: 30px 0 0 0; }
</style>